<template>
    <div class="banner-container">
        <el-carousel :interval="5000" arrow="always">
            <el-carousel-item v-for="item in bannerList" :key="item.id">
                <img style="width: 100%;height: 100%;object-fit: cover;" :src="item.img" alt="">
            </el-carousel-item>
        </el-carousel>
        <div v-if="data.LoginOrRegister=='2'&&!userStore.userId" class="login-container">
            <h3>注册</h3>
            <div style="margin-top: 10px;" class="login-form">
                <el-form :model="RegisterForm" :rules="loginRules" ref="registerFormRef" label-width="0px">
                    <el-form-item prop="username">
                        <el-input v-model="RegisterForm.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="RegisterForm.password" placeholder="请输入密码" show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" @click="register" style="width: 100%; text-align: center;">注册</el-button>
                    </el-form-item>
                </el-form>
                </div>
        </div>
        <div v-else class="login-container">
            <div class="login-avatar">
                <el-avatar :size="80" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
            </div>
            <div class="login-title" v-if="userStore.userId">
                欢迎您，{{ userStore.username }}
                <el-button style="margin: 10px 0;" v-show="userStore.role==='3'" type="success" @click="router.push('/admin')">进入管理端</el-button>
                <el-button style="margin: 10px 0;" type="success" @click="logout">退出登录</el-button>
            </div>
            <div class="login-form" v-else>
                <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef" label-width="0px">
                    <el-form-item prop="username">
                        <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="loginForm.password" placeholder="请输入密码" show-password></el-input>
                    </el-form-item>
                    <el-form-item prop="role">
                        <el-select v-model="loginForm.role" placeholder="请选择您要登录的角色">
                            <el-option label="用户" value="1"/>
                            <el-option label="商户" value="2"/>
                            <el-option label="管理员" value="3"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" @click="login" style="width: 100%; text-align: center;">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
    <!-- 平台收货员信息公示 -->
    <el-card class="info-card">
        <div class="info-title">
            <span>平台收货员信息公示</span>
        </div>
        <el-row style="padding: 10px;margin: 10px 0;">
            <el-col :span="6">
                <el-avatar :size="100" src="https://foruda.gitee.com/avatar/1716948187767316589/9933838_q21001010209_1716948187.png!avatar100" />
                <div style="margin-top: 10px;">鲁洋</div>
                <div>①号收货员</div>
            </el-col>
            <el-col :span="6">
                <el-avatar :size="100" src="https://foruda.gitee.com/avatar/1716948230584942426/9933870_q21001010211_1716948230.png!avatar100" />
                <div style="margin-top: 10px;">杜嘉宝</div>
                <div>②号收货员</div>
            </el-col>
            <el-col :span="6">
                <el-avatar :size="100" src="https://foruda.gitee.com/avatar/1716948092214696623/13553166_zhenghaoxxx_1716948087.png!avatar100" />
                <div style="margin-top: 10px;">郑灏</div>
                <div>③号收货员</div>
            </el-col>
            <el-col :span="6">
                <el-avatar :size="100" src="https://foruda.gitee.com/avatar/1716948243958337038/9933765_q21001010210_1716948243.png!avatar100" />
                <div style="margin-top: 10px;">王大权</div>
                <div>④号收货员</div>
            </el-col>
        </el-row>
    </el-card>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'

const userStore = useUserStore()
const router = useRouter()
const data = defineProps({LoginOrRegister:String})
const bannerList = ref([
    {
        id:1,
        img: 'https://img2.baidu.com/it/u=4149609262,872034627&fm=253&fmt=auto&app=138&f=JPEG?w=1920&h=500'
    },
    {
        id:2,
        img: 'https://www.feipinzhan.com/file/upload/202104/27/151901351824.jpg'
    },
    {
        id:3,
        img: 'https://pic.rmb.bdstatic.com/bjh/down/d15b061b58978702c76e2af1c12c0a5d.jpeg'
    }
])
const loginForm = ref({
    userId: '',
    username: '',
    password: '',
    role: ''
})
const RegisterForm = ref({
    username: '',
    password: ''
})
const loginRules = ref({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
    ]
})
const login = () => {
    if(loginForm.value.role===''){
        ElMessage({
            type: 'error',
            message: '请选择登录角色'
        })
        return
    }
    console.log(loginForm.value.role)
    userStore.login({userId:loginForm.value.role,username:loginForm.value.username,password:loginForm.value.password,role:loginForm.value.role})
    ElMessage({
        type: 'success',
        message: '登录成功'
    })
    router.push('/')
}
const logout = () => {
    userStore.logout()
    ElMessage({
        type: 'success',
        message: '退出登录成功'
    })
    router.push('/')
}
</script>

<style scoped>
.banner-container {
    display: flex;
}

.el-carousel--horizontal,
.el-carousel--vertical {
    height: 300px;
    width: 70%;
}

.login-container {
    flex: 1;
    height: 300px;
    margin-left: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.info-card {
    width: 100%;
    margin-top: 20px;
    border: 1px solid #ddd;
}

.el-col-6{
    text-align: center;
}

.login-title{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
</style>